<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div>
    <div align="center">
      <el-card style="width: 1500px" align="center">
        <el-row>

          <el-col :span="7">
            <el-input placeholder="请输入查询内容" v-model="quaryInfo.quary" clearable @clear="getCustomMessage"></el-input>
          </el-col>
          <el-col  :span="1">
            <el-button type="primary" icon="el-icon-search" @click="getCustomMessage">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"></el-col>
          <el-col>
            <el-table :data="customlist" border stripe style="width: 100%" align="center" height="700">
              <el-table-column prop="customID" v-if="show=false"></el-table-column>
              <el-table-column prop="date" label="日期" width="200%"></el-table-column>
              <el-table-column prop="customName" label="姓名" width="100%"></el-table-column>
              <el-table-column prop="province" label="省份" width="100%"></el-table-column>
              <el-table-column prop="city" label="市区" width="100%"></el-table-column>
              <el-table-column prop="address" label="地址" width="300%"></el-table-column>
              <el-table-column prop="postNum" label="邮编" width="100%"></el-table-column>
              <el-table-column  label="操作" width="500">
                <template>
                  <el-button type="primary" @click="handleDashuju" icon="el-icon-search">大数据查询</el-button>
                  <el-button type="primary" @click="handlefanzui" icon="el-icon-search">犯罪背景查询</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="quaryInfo.PageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="quaryInfo.PageSize"
              layout=" sizes, prev, pager, next, total, jumper"
              :total="total">
            </el-pagination>
          </el-col>
          <el-dialog
            title="大数据查询"
            :visible.sync="dashujudialogVisible"
            width="35%" @close="closeDialog">
            <el-form label-width="150px">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="progressNum"></el-progress>
              <el-form-item label-width="300px" label="社会保障接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="个人信用接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="二要素（姓名+身份证）接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="三要素（姓名+身份证+电话号码）接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="银行数据接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="第三方接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="closeDialog">完成</el-button>
          </span>
          </el-dialog>
          <el-dialog
            title="犯罪背景查询"
            :visible.sync="fanzuidialogVisible"
            width="35%" @close="closeDialog">
            <el-form label-width="150px">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="progressNum"></el-progress>
              <el-form-item label-width="300px" label="违法违规接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="个人信用接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="二要素（姓名+身份证）接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="三要素（姓名+身份证+电话号码）接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="有无前科接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
              <el-form-item label-width="300px" label="第三方接口返回:">
                <label>-----------------------------------------------正常</label>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="closeDialog">完成</el-button>
          </span>
          </el-dialog>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        quaryInfo:{
          quary:'',
          PageNum:1,
          PageSize:10
        },
        total:0,
        dialogVisible: false,
        dashujudialogVisible:false,
        fanzuidialogVisible:false,
        EditFrom:{
          customID:'',
          date:'',
          CustomName:'',
          Province:'',
          City:'',
          Address:'',
          PostNum:''
        },
        customlist:[],
        message:'',
        progressNum: 10,
        startTimer: '',
        endTimer: ''
      }
    },
    created(){
      this.getCustomMessage()
    },
    props: {
      progressStatus: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    watch: {
      progressStatus (val) {
        if (val) {
          this.endProgress()
        }
      }
    },
    methods:{
      async getCustomMessage(){
        const {data:res}=await this.$http.get('neishen/readWaishen',{params:this.quaryInfo})
        this.customlist = res.Custom
        this.total=res.total
        this.PageSize=res.PageSize
        this.PageNum=res.PageNum
      },

      handleSizeChange(NewSize){
        this.quaryInfo.PageSize = NewSize
        this.getCustomMessage()

      },
      handleCurrentChange(NewPage){
        this.quaryInfo.PageNum = NewPage
        this.getCustomMessage()
      },
      handleDashuju(){
        this.dashujudialogVisible=true
        this.progressNum=10
        this.startProgress()
      },
      handlefanzui(){
        this.fanzuidialogVisible=true
        this.progressNum=10
        this.startProgress()
      },
      closeDialog(){
        this.dashujudialogVisible=false
        this.fanzuidialogVisible=false
      },
      startProgress () {
        this.startTimer = setInterval(() => {
          this.progressNum ++
          if (this.progressNum ==101) {
            this.progressNum --
            clearInterval(this.startTimer)
          }
        }, 100);
      },
      endProgress () {
        clearInterval(this.startTimer)
        this.endTimer = setInterval(() => {
          this.progressNum ++
          if (this.progressNum ==100) {
            clearInterval(this.endTimer)
            this.finishProgress()
          }
        }, 10);
      },
      finishProgress () {
        this.$emit('finishProgress', false)
      }
    }
  }
</script>
<style scoped>
  label{
    font-size: 12px;
    color: green;
  }
</style>
